<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入内容" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="广告页面：" prop="advertisePageType">
          <el-select v-model="queryParams.advertisePageType" placeholder="全部" size="small">
            <el-option v-for="item in advertisePageTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告类型：" prop="advertiseType">
          <el-select v-model="queryParams.advertiseType" placeholder="全部" size="small">
            <el-option v-for="item in advertiseTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="listBox">
      <div style="margin-bottom: 14px" class="topBtn">
        <el-button type="primary" @click="handleAdd">新增广告</el-button>
      </div>
      <el-table v-loading="loading" :data="customerList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="广告页面" align="center" prop="advertisePageTypeDict" :show-overflow-tooltip="true" />
        <el-table-column label="广告类型" align="center" prop="advertiseTypeTypeDict" :show-overflow-tooltip="true" />
        <el-table-column label="广告名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="显示状态" align="center" prop="isShowDict" :show-overflow-tooltip="true">
          <!-- <template slot-scope="scope">
              <div>{{}}</div>
            </template> -->
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">
              编辑</el-button>
            <template v-if="scope.row.advertiseType != 1">
              <el-button size="mini" type="text" @click="handleIsShow(scope.row)" v-if="scope.row.isShow == 2">
              显示</el-button>
              <el-button size="mini" type="text" @click="handleIsShow(scope.row)" v-if="scope.row.isShow == 1">
              隐藏</el-button>
            </template>
            <el-button size="mini" type="text" @click="setDelete(scope.row)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        :pageSizes.sync="pageSizes" @pagination="getList" />

    </div>
    <add-activities
      ref="childRef"
      v-if="addActivities"
      :id="id"
      :pathType="pathType"
      :visible.sync="addActivities"
      @success="_handleSuccess" 
    />
  </div>

</template>

<script>
  import {
    advertisementList,
    adminDict,
    advertisementStatus,
    advertisementDelete
  } from "@/api/incentiveManagement/adConfig";
  import addActivities from './components/addActivities'
  export default {
    name: "Customer",
    components: {
      addActivities
    },
    data() {
      return {
        addActivities: false,
        pathType: 'add',
        id: '',
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 页脚参数
        pageSizes: [10, 20, 30, 50, 1000],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          advertiseType: '',
          advertisePageType: '',
        },
        date: [],
        advertisePageTypeList: [],
        advertiseTypeList: []
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getlinkagelist()
      this.getSourcelist()
      this.getList();
    },
    methods: {
      getlinkagelist() {
        //获取商户类型字典
        const params = {
          dictType: "bee_shenye_advertisement_config_advertise_page_type,bee_shenye_advertisement_config_advertise_type",
        };
        adminDict(params).then((res) => {
          this.advertisePageTypeList = res.result[0].dictList;
          this.advertiseTypeList = res.result[1].dictList;
        });
      },
      //获取渠道来源字典
      getSourcelist() {
        const params = {
          dictType: "bee_customer_source",
        };
        adminDict(params).then((res) => {
          this.sourceList = res.result[0].dictList;
        });
      },
      /** 查询会员列表列表 */
      getList() {
        this.loading = true;
        advertisementList(this.queryParams).then(response => {
          this.total = response.result.total
          this.customerList = response.result.records
          this.customerList = this.customerList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          console.log('this.customerList', this.customerList)
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
     
      //新增精选活动
      handleAdd(){
        this.addActivities = true
        this.pathType = 'add'
      },
      /** 详情按钮操作 */
      handleEdit(row){
        this.addActivities = true
        this.id = row.id
        this.pathType = 'edit'
      },
      _handleSuccess(){
        this.getList()
      },
      //前端显示、隐藏
			handleIsShow(row){
        if(row.isShow == 1){
          var title = '是否隐藏'
        }else if(row.isShow == 2){
          var title = '是否显示'
        }
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var id = row.id
            advertisementStatus(id).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      //删除
      setDelete(row) {
        this.$confirm("你确定要删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            advertisementDelete(row.id)
              .then((res) => {
                const {} = res.result;
                this.$message({
                  message: "删除成功",
                  type: 'success',
                  duration: 1500,
                });
                setTimeout(()=>{
                    this.getList();
                },1000)
              })
              .finally(() => {
                this.loading = false;
              });
          })
          .catch(() => {});
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

</style>
